import { useAPIUtils } from "@/components/APIUtilsProvider";
import ImageModal from "@/components/ImageModal";
import PageLayout from "@/components/PageLayout";
import UserPill from "@/components/UserPill";
import {
  Box,
  Button,
  Flex,
  Grid,
  SimpleGrid,
  Text,
  Title,
} from "@mantine/core";
import dayjs from "dayjs";
import { useParams } from "react-router-dom";
import ProductPill from "../../components/ProductPill";
import StatusRenderer from "./StatusRenderer";

export default function AfterSalesDetails() {
  return (
    <PageLayout title={"售后详情"}>
      <Grid w="96%">
        <Grid.Col span={8}>
          <Basics />
        </Grid.Col>
        <Grid.Col span={3} offset={1}>
          <AftersaleImages />
        </Grid.Col>
      </Grid>
    </PageLayout>
  );
}

const Descriptions = ({ title, data, tools }) => {
  return (
    <Box padding="md">
      {title && (
        <Flex justify={"space-between"} align={"baseline"}>
          <Title order={6} mb={"lg"}>
            {title}
          </Title>
          {tools}
        </Flex>
      )}
      <Grid gutter="0" style={{ border: "0.1px solid rgba(0, 0, 0, 0.1)" }}>
        {data.map((item, index) => (
          <>
            <Grid.Col
              span={2}
              bg={"gray.1"}
              p={12}
              style={{ border: "0.5px solid rgba(0, 0, 0, 0.1)" }}
            >
              <Text weight={100} size="sm">
                {item.label}
              </Text>
            </Grid.Col>
            <Grid.Col
              span={item.block ? 10 : 4}
              p={12}
              style={{ border: "0.5px solid rgba(0, 0, 0, 0.1)" }}
            >
              <Text>{item.value}</Text>
            </Grid.Col>
          </>
        ))}
      </Grid>
    </Box>
  );
};

function Basics() {
  const { id } = useParams();
  const {
    restGET,
    tanstackQuery,
    tanstackInvalidate,
    restPOST,
    restPUT,
    restDELETE,
  } = useAPIUtils();

  const query = tanstackQuery(`/api/admin/afterSales/${id}`);

  if (!query.data) {
    return <></>;
  }

  const afterSale = query.data;

  const tools = (
    <Button.Group>
      <Button
        variant="default"
        size="xs"
        onClick={() => window.open(`/orders/${afterSale.order.id}`, "_blank")}
      >
        订单页面
      </Button>
    </Button.Group>
  );

  const descriptionsData = [
    {
      label: "申请人（买家）",
      value: <UserPill user={afterSale.buyer} />,
    },
    {
      label: "状态",
      value: <StatusRenderer status={afterSale.status} />,
    },
    {
      label: "品名",
      value: <ProductPill product={afterSale.product} />,
    },
    {
      label: "数量",
      value: afterSale.order.quantity,
    },
    {
      label: "总价",
      value: afterSale.order.totalPrice,
    },
    {
      label: "总积分",
      value: afterSale.order.totalPv,
    },
    {
      label: "经营店铺",
      value: <UserPill user={afterSale.firstSeller} />,
    },
    {
      label: "管理店铺",
      value: <UserPill user={afterSale.secondSeller} />,
    },
    {
      label: "买家备注",
      value: afterSale.remarkByBuyer,
      block: true,
    },
    {
      label: "店铺备注",
      value: afterSale.remarkBySeller,
      block: true,
    },
    {
      label: "申请时间",
      value: dayjs(afterSale.createdAt).format("YYYY/MM/DD HH:mm:ss"),
      block: true,
    },
  ];
  return (
    <Descriptions
      title={`业务流水号: ${id}`}
      data={descriptionsData}
      tools={tools}
    />
  );
}

function AftersaleImages({ data }) {
  const { id } = useParams();
  const {
    restGET,
    tanstackQuery,
    tanstackInvalidate,
    restPOST,
    restPUT,
    restDELETE,
  } = useAPIUtils();

  const query = tanstackQuery(`/api/admin/afterSales/${id}`);

  if (!query.data) {
    return <></>;
  }

  const afterSale = query.data;

  return (
    <>
      <Title order={6} mb={"lg"}>
        申请人上传图片
      </Title>
      <SimpleGrid cols={2}>
        <ImageModal src={afterSale.imageUrl0} />
        <ImageModal src={afterSale.imageUrl1} />
        <ImageModal src={afterSale.imageUrl2} />
        <ImageModal src={afterSale.imageUrl3} />
        <ImageModal src={afterSale.imageUrl4} />
        <ImageModal src={afterSale.imageUrl5} />
      </SimpleGrid>
    </>
  );
}
